<template>
    <ui-main>
        <van-swipe :autoplay="3000" slot="header">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img :src="image">
            </van-swipe-item>
        </van-swipe>

        <van-tabs v-model="active" slot="header">
            <van-tab v-for="(item, index) of mediaTypes" :key="index" :title="item.data_name"/>
        </van-tabs>

        <ui-pull @load="getListData" v-model="listData" :total="total" :num.sync="pageNumber" ref="pull">
            <van-cell v-for="(item,index) of listData" :key="index" :title="item.st_title" :value="item.realse_time" is-link @click="detail(item)"></van-cell>
        </ui-pull>
    </ui-main>
</template>

<script>
    import cy from '../mixins/cy';

    export default {
        mixins: [cy],
        data() {
            return {
                // 数据源
                // 轮播图片
                images: [
                    'http://img.sccnn.com/bimg/339/28115.jpg',
                    'http://5b0988e595225.cdn.sohucs.com/images/20171002/4b8d3440f8c74e72bbcf554ced7f5d7a.jpeg',
                    'http://spider.nosdn.127.net/fb987efbc0821f3c8a2f2aea1d47767d.gif'
                ],
                // 媒体类型（大类）
                mediaTypes: [],
                // 数据
                listData: [],
                // 其他
                // 被激活标签索引
                active: 0,
                // ajax 总次数
                listDataAjaxNum: 0,
                // 页数
                pageNumber: 1,
                // 页码
                pageSize: 20,
                // 总记录数
                total: 0
            };
        },
        watch: {
            // 监听切换标签
            active() {
                this.$refs.pull && this.$refs.pull.reload();
            }
        },
        mounted() {
            this.$title('热点专题');

            this.$loading.open();

            this.$$getMediaTypeList().then(data => {
                this.mediaTypes = data.content;

                this.$loading.close();

                this.$refs.pull && this.$refs.pull.reload();
            }).catch(e => {
                console.error(e);

                this.$loading.close();
            });
        },
        methods: {
            getListData({isDownScrolling}) {
                if (!this.mediaTypes.length) {
                    this.$refs.pull && this.$refs.pull.endSuccess();

                    return;
                }

                let ajaxNum = ++this.listDataAjaxNum;

                this.$$getRdztList({
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    media_type: this.mediaTypes[this.active].data_code
                }).then(data => {
                    if (this.listDataAjaxNum === ajaxNum) {
                        this.pageNumber++;
                        this.total = data.total;

                        if (isDownScrolling) {
                            this.listData = data.content;
                        } else {
                            this.listData = [...this.listData, ...data.content];
                        }

                        this.$refs.pull && this.$refs.pull.endSuccess();
                    }
                }).catch(e => {
                    console.error(e);

                    if (this.listDataAjaxNum === ajaxNum) {
                        this.$refs.pull && this.$refs.pull.endSuccess();
                    }
                });
            },
            detail(item) {
                this.$router.push({
                    path: '/rdztmx',
                    query: {
                        id: item.id
                    }
                })
            }
        }
    }
</script>

<style type="scss" scoped>
    img {
        width: 100%;
        height: 200px;
    }
</style>
